audio常用的事件及方法整理

您所在的位置：网站首页 › vue audio 自动播放 › audio常用的事件及方法整理

audio常用的事件及方法整理

2023-08-09 13:55| 来源: 网络整理| 查看: 265

audio 属性

可读写属性:

src: 播放文件地址

autoplay: 基于用户体验角度各大浏览器禁止自动播放

controls: 控制器显示

muted: 是否静音

loop: 是否循环播放

currentSrc: 当前播放地址

currentTime: 当前播放时长单位 s

duration: 音频时长单位 s

volume: 音乐音量 [0, 1] 最小值 0 最大值 1

playbackRate: 播放速度

只读属性:

paused: 音乐是否暂停播放 true--暂停 false--播放

ended: 音乐是否结束播放 true--结束 false--没有结束设置了loop 音频重复循环播放不会结束()

Document 更改播放地址从50%开始播放静音 0.5 1 2 开始播放结束播放播放速度 0.1 播放速度 1 播放速度 10 // 获取元素 var audio = document.querySelector('audio'); // 获取属性 console.log(audio.src); audio.autoplay = false; console.log(audio.autoplay); // audio.controls = false; console.log(audio.controls); // audio.muted = true; console.log(audio.muted); audio.loop = true; console.log(audio.loop); console.log(audio.currentSrc); console.log(audio.currentTime); console.log(audio.duration); console.log(audio.volume); // 音乐音量 [0, 1] 最小值 0 最大值 1 console.log(audio.paused); // 音乐是否暂停播放 true--暂停 false--播放 console.log(audio.ended); // 音乐是否结束播放 true--结束 false--没有结束设置了loop 音频重复循环播放不会结束 console.log(audio.playbackRate); // 播放速度 btns[0].onclick = function () { audio.src = './金玟岐-岁月神偷 (Demo).mp3'; }; btns[1].onclick = function () { audio.currentTime = audio.duration / 2; }; btns[2].onclick = function () { audio.volume = 0; }; btns[3].onclick = function () { audio.volume = 0.5; }; btns[4].onclick = function () { audio.volume = 1; }; btns[5].onclick = function () { // 报错: The volume provided (2) is outside the range [0, 1]. 音量只能设置[0,1]之间的值 audio.volume = 2; }; btns[8].onclick = function () { audio.playbackRate = 0.1; }; btns[9].onclick = function () { audio.playbackRate = 1; }; btns[10].onclick = function () { audio.playbackRate = 10; }; 方法

load: 重新加载音频

pause: 暂停播放

play: 播放音乐

btns[6].onclick = function () { audio.load(); // 重新加载音频 audio.play(); // 播放音乐 }; btns[7].onclick = function () { audio.pause(); // 暂停播放 }; 事件

oncanplay: 音频可以播放事件(缓冲已足够开始时)

oncanplaythrough: 音频可以不缓冲直接从头执行到尾

ondurationchange: 当媒体时长被改变

ontimeupdate: 播放时间更新的事件

onended: 当音频结束播放事件

onpause: 当音频播放暂停事件

onvolumechange: 当音量发生改变时触发

// 当音量改变时 audio.onvolumechange = function () { console.log(audio.volume); }; // 音频可以播放事件 audio.oncanplay = function () { console.log(audio.currentSrc); console.log(audio.duration); }; // 播放时间更新的事件 audio.ontimeupdate = function () { console.log(audio.currentTime); console.log(audio.paused); }; // 当音频结束播放事件 audio.onended = function () { console.log(audio.ended); }; // 当音频播放暂停事件 audio.onpause = function () { console.log(audio.paused); };

望各位不吝赐教。

【本文地址】

audio常用的事件及方法整理

audio常用的事件及方法整理

今日新闻

推荐新闻